<template>
  <view class="p-goods-info">
    <!--  普通订单  -->
    <view class="info" v-if="detail.status!==2">
      <view class="pic">
        <x-image :src="formatOss(detail.productImgUrl)"/>
      </view>
      <view class="flex flex1" style="flex-direction: column">
        <view class="flex">
          <view class="content">
            <view class="goods-name">{{ detail.productTitle }}</view>
            <view class="spec"><text v-if="detail.comboName">套餐:{{detail.comboName}}</text>{{ productSkuInit }}</view>
          </view>
          <view class="rt-price-num">
            <view class="price"><text class="font-20">¥</text>
              {{ formatZero(detail.productPrice) }}</view>
            <view class="num">x{{ detail.productCount }}</view>
          </view>
        </view>
        <view class="refund-status" v-if="detail.postSaleStatus === 10">退款关闭</view>
        <view class="refund-status" v-if="detail.postSaleStatus === 2 || detail.postSaleStatus === 4 || detail.postSaleStatus === 5">退款中</view>
        <view class="refund-status" v-if="detail.postSaleStatus === 7">退款成功</view>
        <view class="refund-status" v-if="detail.closeStatus === 5">商家主动退款</view>
        <view class="refund-status" v-if="detail.postSaleStatus === 9">退款关闭 商家主动退款</view>
      </view>
    </view>
    <!-- 退款状态的订单  -->
    <view class="info" v-else>
      <view class="pic">
        <x-image :src="detail.productImgUrl"/>
      </view>
      <view class="flex flex1" style="flex-direction: column">
        <view class="content">
          <view class="goods-name">{{ detail.productTitle }}…</view>
          <view class="flex" style="align-items: baseline;">
            <text class="spec" style="margin-right: 30px;"><text v-if="detail.comboName">套餐:{{detail.comboName}}</text>{{ productSkuInit }}</text>
            <text style="font-size: 12px;color: #999999;">x1</text>
          </view>
          <view class="refund-status" style="text-align: left">退款：¥{{ formatZero(detail.productPrice) }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import XTools from '@/utils/x-tools';
import XImage from '@/components/x-image';

export default {
  name: 'XOrderProduct',
  components: {
    XImage
  },
  props: {
    detail: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {};
  },
  computed: {
    productSkuInit() {
      try {
        return JSON.parse(this.detail.productSku).join('、');
      } catch (e) {
        return this.detail.productSku?.toString().replace(/\[|]/g, '');
      }
    }
  },
  methods: {
    // 价格格式化
    formatZero(value) {
      return XTools.formatZero(value);
    },
    // 格式化图片
    formatOss(url) {
      return this.$tools.formatOss(url, 200);
    }
  }
};
</script>

<style lang="scss" scoped>
.p-goods-info{
  .info{
    display: flex;
    padding: 0 24px;
    .pic{
      width: 160px;
      height: 160px;
      border-radius: 6px;
      background: #FFE4E4;
      overflow: hidden;
    }
    .content{
      display: flex;
      flex-direction: column;
      flex: 1;
      margin-left: 16px;
      .goods-name{
        font-size: 30px;
        color: $uni-color-default;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .spec{
        margin-top: 8px;
        font-size: 26px;
        color:$uni-color-info;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }
    }
    .refund-status{
      text-align: right;
      font-size: 24px;
      color: $uni-color-primary;
    }
    .rt-price-num{
      margin-left: 30px;
      text-align: right;
      .price{
        font-size: 30px;
        color: $uni-color-default;
      }
      .num{
        margin-top: 8px;
        font-size: 26px;
        color:$uni-color-info;
      }
    }
  }
}
</style>
